<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <script src="/libs/swiper/js/swiper.min.js"></script>
    <script src="/libs/jquery/jquery-3.5.1.min.js"></script>
    <script src="/libs/jquery/jquery.lin-1.1.1.js"></script>
</head>

<body>
    <div class="qq"><a href="/html/denglu.html"><img src="/images/logoqq.png" alt="">QQ</a></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="/images/denglu1.jpg" alt="">
            </div>
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="/images/denglu.jpg" alt="">
            </div>
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="/images/denglu2.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="box">
        <h2>登录</h2><br>
        账号:<input type="text" id="nameInput"><br>
        密码:<input type="password" id="pwdInput"><br>
        <button class="btn-login">登录</button>
        <button class="btn-zhuce">注册</button>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
            $('.btn-login').on('click',function () {
                const name = $('#nameInput').val(),
                  pwd = $('#pwdInput').val()
               var storge = JSON.parse(localStorage.getItem('userInfo'))
               storge.forEach(item => {
                   if(item.username == name && item.userpwd == pwd) {
                       alert('登录成功')
                       $.lin_setCookie('List', name , { path: '/index.html'})
                       location.href = '../index.html'
                   }else{
                       alert('登录失败,请输入正确的账号或者密码')
                   }
               })

            })
            $('.btn-zhuce').on('click',function () {
                location.href = './zhuce.html'
            })

        // const btn = document.querySelector("#btn")
        // const unameInput = document.querySelectorAll("input")[0]
        // const pwdInput = document.querySelectorAll("input")[1]
        // btn.onclick = function () {
        //     // 先默认 没有这个用户 flag = false
        //     let flag = false
        //     let username = unameInput.value
        //     let pwd = pwdInput.value
        //     // 应该吧localstorage 里面的 userInfo 取出来
        //     let storage = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : []
        //     // console.log(storage)
        //     storage.forEach(item => {
        //         // console.log(item)
        //         // 先判断用户名是否一致 
        //         if (username == item.name && pwd == item.password) {
        //             // 登陆成功
        //             flag = true
                    
        //         } 

        //     })
        //     if(flag){
        //         // 成功
        //         alert("成功")
        //         // 把 用户名 保存到 cookie 
        //         // setCookie("uname",username,3600*24*7)
        //         document.cookie = `uname=${username}`
        //         window.location.href = "/pubg.html"

        //     }else{
        //         // 失败
        //         alert("请先去注册")
        //     }
        // }


    </script>
</body>

</html>